<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<head>
  <meta charset="UTF-8">
  <title>图片切换</title>
</head>
<body>
<div id="app" align="center">
  <input v-show="index!=0" type="submit" value="上一张" @click="subImg">
  <img :src="imgArr[index]" width="720">
  <input v-show="index<imgArr.length-1" type="submit" value="下一张" @click="addImg">
</div>
<script>
  var app = new Vue({
    el: "#app",
    data: {
      imgArr: ["后来的我们1.jpg", "后来的我们2.jpg", "后来的我们3.jpg", "后来的我们4.jpg", "教父.jpg", "风犬少年的天空.jpg"],
      index: 0,
    },
    methods: {
      addImg: function () {
          this.index++;
      },
      subImg: function () {
        this.index--;
      }
    }
  })
</script>
</body>
</html>
